
import { message } from 'antd';
import React, { useEffect, useState } from 'react';
import { useIntl } from 'umi';
import ProCard from '@ant-design/pro-card';
import ProList from '@ant-design/pro-list';
import {
    getApiAccountSettingsSecurity as accountSecurity,
    postApiAccountSettingsChangePassword as accountPassChange,
} from '@/services/furion-cms/Account';
import { chineseName, mobilePhone, email } from '@/utils/sensitiveDetection';
import { PopupChangePassword } from '@/components/ChangePassword';

const SecurityView: React.FC = () => {
    /**
     * @en-US International configuration
     * @zh-CN 国际化配置
     * */
    const intl = useIntl();

    const [securityList, setSercurityList] = useState<{ title: string; description: string; ops: React.ReactNode[]; }[]>();
    const [changePasswordVisible, setChangePasswordVisible] = useState(false);

    useEffect(() => {
        (async () => {
            try {
                const { data } = await accountSecurity();
                const perHandlerData = [
                    {
                        title: '账户密码',
                        description: `使用账号：${chineseName(data?.account ?? '')}`,
                        ops: [<a key="ModifyPassword" onClick={() => setChangePasswordVisible(true)}>修改</a>],
                    },
                    {
                        title: '密保手机',
                        description: data?.phoneNumberConfirmed ? `已绑定手机：${mobilePhone(data.phoneNumber)}` : '未绑定手机',
                        ops: [<a key="ModifyPhone">{data?.phoneNumberConfirmed ? '修改' : '绑定'}</a>],
                    },
                    {
                        title: '备用邮箱',
                        description: data?.emailConfirmed ? `已绑定邮箱：${email(data.email)}` : '未绑定邮箱',
                        ops: [<a key="ModifyEmail">{data?.emailConfirmed ? '修改' : '绑定'}</a>],
                    },
                ];
                setSercurityList(perHandlerData);
            } catch { }
        })();
    }, []);

    return (<ProCard title={<span style={{
        fontSize: 20
    }}>{intl.formatMessage({
        id: 'pages.account.settings.security',
        defaultMessage: '安全设置'
    })}</span>} bodyStyle={{
        padding: '12px 12px 24px 12px'
    }}>
        <ProList
            itemLayout="horizontal"
            dataSource={securityList}
            metas={{
                title: {
                    dataIndex: 'title',
                },
                description: {
                    dataIndex: 'description',
                },
                actions: {
                    render: (_, row) => row.ops,
                },
            }}
            cardProps={{
                bodyStyle: {
                    padding: 0
                }
            }}
            split />
        <PopupChangePassword
            mode="security"
            modalVisible={changePasswordVisible}
            onVisibleChange={setChangePasswordVisible}
            onSubmit={(values) => {
                console.log('password-change', values);
                return accountPassChange({ ...values }).then(() => {
                    message.success(intl.formatMessage({
                        id: 'pages.user.passwordchange.success',
                        defaultMessage: '密码修改成功'
                    }));
                    setChangePasswordVisible(false);
                });
            }}
        />
    </ProCard>);
}

export default SecurityView;